<template>
  <div class="p-3">
    <a-form class="!mb-3" :model="searchModel" layout="inline">
      <a-form-item label="手机号码" name="cellphone">
        <a-input v-model:value="searchModel.cellphone" />
      </a-form-item>
      <a-form-item label="用户昵称" name="nickName">
        <a-input v-model:value="searchModel.nickName" />
      </a-form-item>
      <a-form-item label="支付时间" name="payDate">
        <a-range-picker v-model:value="searchModel.payDate" :allow-empty="[true, true]" @change="change" />
      </a-form-item>
      <a-form-item label="支付状态" name="payStatus">
        <a-select v-model:value="searchModel.payStatus" :options="payStatusData" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">筛选</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="pageData"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ x: true }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'paymentStatus'">
          {{ record.status }}
        </template>
        <template v-else-if="column.key === 'paymentTime'">
          {{ dayjs(record.paymentTime).format(DATETIME_FORMAT_STR) }}
        </template>
        <template v-else-if="column.key === 'oper'">
          <a-space>
            <a-button type="primary" @click="backMoney(record)">退款</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import { getPaymentRecords } from "/@/api/manage/userManage";
import { usePagination } from "/@/hooks/web/usePagination";
import { payStatusData } from "/@/base/data";
import dayjs from "dayjs";
import { DATE_FORMAT_STR, DATETIME_FORMAT_STR } from "/@/utils/common";
interface SearchModel {
  cellphone: string;
  nickName: string;
  payDate?: dayjs.Dayjs[];
  payStatus: string;
  startPayTime?: string;
  endPayTime?: string;
}
export default defineComponent({
  components: {},
  setup() {
    //search
    const searchModel = reactive<SearchModel>({
      cellphone: "",
      nickName: "",
      payDate: [],
      payStatus: "",
    });
    function search() {
      const payDate = searchModel.payDate;
      let searchParam = { ...searchModel };
      if (payDate) {
        if (payDate[0]) {
          searchParam.startPayTime = (payDate[0] as dayjs.Dayjs).format(DATE_FORMAT_STR) + " 00:00:00";
        }
        if (payDate[1]) {
          searchParam.endPayTime = (payDate[1] as dayjs.Dayjs).format(DATE_FORMAT_STR) + " 23:59:59";
        }
      }
      delete searchParam.payDate;
      // refreshPagination({ model: searchParam });
      console.log(searchParam);
    }
    //table
    const columns = [
      {
        title: "付费ID",
        dataIndex: "id",
      },
      {
        title: "用户ID",
        dataIndex: "userId",
      },
      {
        title: "用户昵称",
        dataIndex: "nickName",
      },
      {
        title: "真实姓名",
        dataIndex: "name",
      },
      {
        title: "手机号码",
        dataIndex: "cellphone",
      },
      {
        title: "付费类型",
        dataIndex: "paymentType",
      },
      {
        title: "当前等级",
        dataIndex: "level",
      },
      {
        title: "支付金额",
        dataIndex: "paymentAmount",
      },
      {
        title: "微信支付流水号",
        dataIndex: "transactionNumber",
      },
      {
        title: "支付时间",
        dataIndex: "paymentTime",
        key: "paymentTime",
      },
      {
        title: "支付状态",
        dataIndex: "paymentStatus",
        key: "paymentStatus",
      },
      {
        title: "操作",
        key: "oper",
      },
    ];
    const { refreshPagination, pagination, pageData, loading } = usePagination(getPaymentRecords);
    onMounted(() => {
      refreshPagination();
    });
    //退款
    function backMoney() {}
    return {
      searchModel,
      payStatusData: [{ label: "所有", value: "" }, ...payStatusData],
      columns,
      pageData,
      loading,
      pagination,
      search,
      backMoney,
      dayjs,
      DATETIME_FORMAT_STR,
      change(dates, dateStrings) {
        console.log(dates, dateStrings, { ...searchModel });
      },
    };
  },
});
</script>
<style lang="less">
.user-drawer {
  .ant-descriptions-item-label {
    width: 160px;
  }
  .ant-descriptions-item-content {
    justify-content: flex-end;
  }
}
</style>
